import React, { Component } from 'react'
import { Table, Tag, Space, Button, Modal } from 'antd';
import { Form, Input, Checkbox } from 'antd';
import aixos from "axios"
import axios from 'axios';
import {connect} from "react-redux"
class Router01 extends Component {
    state = {
        dataSource: [],
        columns: [
            {
                title: '姓名',
                dataIndex: 'name1',
                key: 'name',
            },
            {
                title: '日期',
                dataIndex: 'date',
                key: 'date',
            },
            {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record, index) => (
                    <Space size="middle">
                        <a onClick={this.editfn.bind(this,record,index)}>编辑</a>
                        <a onClick={this.delfn.bind(this, index)}>删除</a>
                    </Space>
                ),
            },
        ],
        delIndex: 0, // 用于记录删除哪条的下标
        isModalVisible: false,// 用于控制弹窗得显示与隐藏
        editIndex:0,// 用于编辑哪一条的下标
        bianji:"新增", // 用于判断弹唱走新增逻辑还是编辑逻辑
    }
    delfn(index) { // 删掉得函数
        console.log(index)
        let arr = [...this.state.dataSource] //进行一个浅拷贝，不要让变量直接等于state定义得数据
        arr.splice(index, 1)
        console.log(arr, 124);
        setTimeout(() => {
            this.setState({
                dataSource: arr
            })
        }, 50);

    }
    editfn (item,index) { // 编辑的函数
        this.setState({
            isModalVisible:true,
            bianji:"编辑",
            editIndex:index
        })
        setTimeout(()=>{
            this.myref.setFieldsValue(item)
        },100)
    }
    componentDidMount() {
        axios.get("/list").then(res => {
            this.setState({
                dataSource: res.data
            }, () => {
                console.log(this.state.dataSource);
            })
        })
    }
    handleOk() { // 弹窗点击ok得方法

    }
    handleCancel() { // 弹窗取消的方法
        this.setState({
            isModalVisible: false
        })
    }
    addopenfn() { // 弹窗打开得方法
        this.setState({
            isModalVisible: true,
            bianji:"新增"
        })
        setTimeout(()=>{
            this.myref.resetFields() // 让表单的值清空
        },100)
       
    }
    onFinish(values){ // 表单成功提交的事件
        // console.log(values)
        values.key = new Date().getTime() // 这样最大程度避免key重复
        if (this.state.bianji == "新增") {
         
            this.state.dataSource = [... this.state.dataSource,values]
            this.setState({
                dataSource: this.state.dataSource,
                isModalVisible:false
            })
        } else {
            let arr = [...this.state.dataSource]
            console.log(this.state.editIndex,111111);
            arr[this.state.editIndex] = values;
            this.setState({
                dataSource:arr,
                isModalVisible:false
            })
        }
      
        
    }
    render() {

        return (
            <div className='router01'>
                姓名：{this.props.name}
                <button onClick={()=>this.props.setname()}>dianj</button>
                <Button onClick={this.addopenfn.bind(this)}>新增</Button>
                <Table dataSource={this.state.dataSource} columns={this.state.columns} />;
                <Modal forceRender title={this.state.bianji} visible={this.state.isModalVisible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)} footer={null}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        onFinish={this.onFinish.bind(this)}
                        autoComplete="off"
                        ref={(ref)=>this.myref = ref}
                    >
                        <Form.Item
                            label="姓名"
                            name="name1"
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="日期"
                            name="date"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="地址"
                            name="address"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
let mapStateToprops =(state)=>{
    return {
        ...state
    }
}
let mapDispatchToprops = (dispatch)=>{
    return {
        setname(){
            dispatch({
                type:"setname",
                payload:"wangwu"
            })
        }
    }
}
export default connect(mapStateToprops,mapDispatchToprops)(Router01)